<template>
  <el-row class="dataSource">
    <el-col :span="3">数据源配置</el-col>
    <el-col :span="20">
      <el-table :data="dataSource" border style="width: 100%">
        <el-table-column prop="equipmentName" label="设备名称" />
        <el-table-column prop="equipmentType" label="设备类型" />
        <el-table-column prop="dataSource" label="数据来源" />
        <el-table-column prop="dataPath" label="数据路径" />
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button disabled v-if="scope.row.dataSource == 'NFC'" type="primary">
              测试
            </el-button>
            <el-button v-else type="primary" @click="handleTest(scope.$index, scope.row)">
              测试
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-row class="dataField">
    <el-col :span="3">数据字段管理</el-col>
    <el-col :span="20">
      <el-table :data="dataField" border style="width: 100%">
        <el-table-column prop="EquipmenName" label="设备名称" />
        <el-table-column prop="dataName" label="数据名称" />
        <!-- <el-table-column prop="checkRules" label="校验规则" /> -->
        <el-table-column label="校验规则">
          <template #default="{ row }">
            <span v-if="!row.editMode">{{ row.checkRules }}</span>
            <el-input
              v-else
              v-model="row.checkRules"
              @blur="row.editMode = false"
              @keyup.enter="row.editMode = false"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="row.editMode = true" v-if="!row.editMode"> 编辑 </el-button>
            <el-button @click="saveRow(row)" v-else> 保存 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row class="mb-4">
    <el-dialog v-model="dialogVisible" title="测试" draggable>
      <div class="dialog-scroll-container">
        <br />
        <div>
          <el-image
            fit="contain"
            v-if="testText.row.dataSource == '图片截图'"
            :src="testText.row.imgUrl"
          />
          <el-image
            fit="contain"
            style="height: 70px"
            v-else-if="testText.row.dataSource == '文件获取'"
            :src="testText.row.imgUrl"
          />

          <el-space wrap v-else-if="testText.row.dataSource == '语音输入'">
            <el-image
              fit="contain"
              style="height: 70px"
              :src="testText.row.imgUrl"
              alt="点击可播放语音"
            />
            <el-button type="primary" @click="playAudio" plain>开始播放</el-button>
            <el-button type="danger" @click="stopAudio" plain>停止播放</el-button>

            <audio ref="audioPlayer" :src="testText.row.audioUrl"></audio>
          </el-space>

          <el-image
            fit="contain"
            style="width: 70%"
            v-else-if="testText.row.dataSource == 'NFC'"
            :src="testText.row.imgUrl"
          />

          <el-image v-else :src="testText.row.imgUrl" />
        </div>
        <br />
        <el-space wrap direction="vertical">
          <el-button type="primary" plain @click="ifShow = true">识别文字</el-button>
        </el-space>
        <el-space wrap direction="vertical">
          <div style="padding: 10px 30px" v-if="ifShow">
            <span>{{ testText.row.text }} </span>
          </div>
        </el-space>
        <br />
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="closeDialog"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-row>
</template>
<style scoped lang="scss">
.el-row {
  margin: 20px 0 40px 0;
}
.tempDialog {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dialog-scroll-container {
  max-height: 62vh; /* 限制高度为视口高度的62% */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  padding: 12px; /* 可选：增加内边距避免内容贴边 */
}
</style>
<script setup lang="ts">
import meiwen from '@/assets/images/meiwen.png'
import textImg from '@/assets/images/txtImg.jpg'
import zhaopian from '@/assets/images/zhaopian.jpg'
import nfcImg from '@/assets/images/nfcIdentification1.jpg'
import yuyinImg from '@/assets/images/yuyinImg.jpg'
import testAudio from '@/assets/audio/testAudio.mp4'
import { useDataSourceMagStore } from '@/store'
const dataSourceMagStore = useDataSourceMagStore()
interface User {
  equipmentName: string
  equipmentType: string
  dataSource: string
  dataPath: ''
  text: ''
  imgUrl: null
  audioUrl: null
}

const testText = ref({
  index: 0,
  row: {
    equipmentName: '',
    equipmentType: '',
    dataSource: '',
    dataPath: '',
    text: '',
    imgUrl: null,
    audioUrl: null,
  },
})
const dialogVisible = ref(false)
const ifShow = ref(false)
const ifPlayAudio = ref(false)

const saveRow = (row: any) => {
  row.editMode = false
  // 这里可以调用 API 保存数据
  console.log('保存行数据:', row)

  console.log('应用成功', dataField)
  dataSourceMagStore.dataFieldMsgData = dataField.value
}
const closeDialog = () => {
  dialogVisible.value = false
  if (audioPlayer.value) {
    audioPlayer.value.pause()
  }
}
const handleTest = (index: number, row: User) => {
  testText.value = { index, row }
  dialogVisible.value = true
  // 隐藏识别的文字
  ifShow.value = false
  //停止播放语音
  ifPlayAudio.value = true
  if (audioPlayer.value) {
    audioPlayer.value.pause()
  }
}
const audioPlayer = ref(null)

console.log('6666666>', audioPlayer.value)

const playAudio = () => {
  ifPlayAudio.value = false
  if (audioPlayer.value) {
    audioPlayer.value.play()
  }
}
const stopAudio = () => {
  ifPlayAudio.value = true
  if (audioPlayer.value) {
    audioPlayer.value.pause()
  }
}

const dataSource = [
  {
    equipmentName: '设备A',
    equipmentType: 'xx测试仪',
    dataSource: '截图获取',
    dataPath: 'D:\DATA\A',
    imgUrl: meiwen,
    audioUrl: null,
    text: '小学生分年级美文诵读八十篇关于背诵,长期以来，我们一直在思考这样一个问题为什么学生的作文语言这样干涩，为什么人们的生活语言这么无趣。很多人归结于读书不够。但我觉得，不仅仅如此，更因为我们读的不够精，不够深，而要读精读深，必须熟读成诵，即过背诵关，所谓“书读百遍，其义自见”，“故书不厌百回读，熟读精思于自知”。我们有时见闻某位大师，满腹经纶，口吐莲花，敬佩之情溢于言表，却忘了这是他们百炼成钢、磨杵成针的必然结果。而背诵，这把文思泉涌、妙语连珠的金钥匙，本来我们每人手里都攥着一把的。',
  },
  {
    equipmentName: '设备B',
    equipmentType: 'xx测试仪',
    dataSource: '文件获取',
    dataPath: 'D:\DATA\B',
    text: '小学生分年级美文诵读八十篇关于背诵,长期以来，我们一直在思考这样一个问题为什么学生的作文语言这样干涩，为什么人们的生活语言这么无趣。很多人归结于读书不够。但我觉得，不仅仅如此，更因为我们读的不够精，不够深，而要读精读深，必须熟读成诵，即过背诵关，所谓“书读百遍，其义自见”，“故书不厌百回读，熟读精思于自知”。我们有时见闻某位大师，满腹经纶，口吐莲花，敬佩之情溢于言表，却忘了这是他们百炼成钢、磨杵成针的必然结果。而背诵，这把文思泉涌、妙语连珠的金钥匙，本来我们每人手里都攥着一把的。',
    imgUrl: textImg,
    audioUrl: null,
  },
  {
    equipmentName: '设备C',
    equipmentType: 'xx测试仪',
    dataSource: '拍照识别',
    dataPath: 'D:\DATA\C',
    imgUrl: zhaopian,
    audioUrl: null,
    text: '美文摘抄篇1友情是相知。当你需要的时候，我还没有讲，友人已默默来到你的身边。他的眼睛和心都能读懂你，更会用手挽起你单薄的臂弯。正因有友情，在这个世界上你不会感到孤单。当然，一个人也能够傲视苦难，在天地间挺立卓然。可是咱们不得不承认，应对艰险与艰难，一个人的意志能够很坚强，但办法有限，力量也会有限。于是，友情像阳光，拂照你如拂照乍暖还寒时风中的`花瓣。友情常在顺境中结成，在逆境中经受考验，在岁月之河中流淌伸延。有的兄弟姐妹只能交一时，有的兄弟姐妹能够交永久。交一时的兄弟姐妹可能是一场误会，对曾有过的误会不必埋怨，只需说声再见。交永久的兄弟姐妹用不着发什么誓言，当穿过光阴的隧道之后，那一份真挚与执着，已足以感地动天。挚友不必太多，人生得知己足矣，何况有不止一个心灵上的伙伴。兄弟姐妹能够很多，只要咱们有一个共同的追求与心愿。友情不受限制，它能够在长幼之间、同性之间、异性之间，甚至是异域之间。山隔不断，水隔不断，不是缠绵也浪漫。只是相思情太浓，仅用相识意太淡，友情是相知，味甘境又远。美文摘抄篇2秋雨丝丝洒枝头,烟缕织成愁，遥望落花满地残红，曾也枝头盈盈娉婷，装饰他人梦。如今花落簌簌，曾绚烂完美刹那芳华。看那花瓣上的珍珠，不甚清风的摆动，悄然滑落，那不舍的是离愁，尘缘已过，聚散匆匆。不需忧伤，花儿，不会因为离枝而失去芬芳;草儿，不会因为寒冬而放弃生的`期望。今年花胜去年红，明年花更好，花开最美，不负这红尘人间。细数走过的岁月，欢乐伴着忧伤。在时光的深处中，最美的永远艳丽多彩不褪色，那些伤痛，时间久了也就模糊不清，留下的记忆也是残缺碎片。遇到不满意时，总会拿过去的好作比较，留恋过去，厌恶此刻，始不知过去也是此刻，此刻也会过去。行走红尘人间，做个随遇而安的草木女子，让清风拂袖，心香暖怀。生命的旅途，总会有千回百转，悲喜寒凉，季节的辗转，绮丽的风景。若是懂',
  },
  {
    equipmentName: '设备D',
    equipmentType: 'xx测试仪',
    dataSource: 'NFC',
    dataPath: 'D:\DATA\D',
    imgUrl: nfcImg,
    audioUrl: null,
    text: '在这个浩瀚的人生旅途中，每一颗心都藏着无限可能，如同星辰般璀璨。面对生活的风雨，我们往往容易迷失方向，但请记住，最美丽的风景往往隐藏在最陡峭的山路之后。坚持，是照亮前行道路的灯塔。它不在于瞬间的闪耀，而在于持之以恒的光芒。当你感到疲惫，想要放弃时，不妨回望来时路，那些深深浅浅的脚印，都是勇气与毅力的见证。每一次跌倒，都是向成功迈进的一步；每一次失败，都是向智慧靠近的阶梯。心怀希望，眼中有光。即使前路未知，也要相信，只要心中有爱，脚下就有路。积极的心态，如同春日暖阳，能融化冰雪，唤醒沉睡的大地。让心灵沐浴在正能量的阳光下，用微笑面对挑战，用行动书写传奇。记住，生活不会辜负每一个努力的人。在追梦的路上，或许会有荆棘，但更多的是鲜花与掌声。保持积极向上的心态，勇往直前，因为最美的风景，往往属于那些敢于探索、不懈追求的勇者。加油，美好的明天正等着你去探索！',
  },
  {
    equipmentName: '设备E',
    equipmentType: 'xx测试仪',
    dataSource: '语音输入',
    dataPath: 'D:\DATA\E',
    imgUrl: yuyinImg,
    audioUrl: testAudio,
    text: '没人明白鱼落泪，水明白，因为鱼在水心里;没人明白水孤独，山明白，因为水在山怀里;没人明白鸟哀怨，天明白，因为鸟在天心中;没人明白我忧郁，年华明白，因为我行走在年华的齿轮中。不知何时，我又挣扎在了年华的泥潭中，总想着出淤泥而不染，但偏偏浑身污浊不堪。有时候，记忆的涟漪敲打的不单单是那闭塞的心灵，还有那懵懂的年华。低吟浅唱间，年华如微风般吹过。不留下一丝一毫的痕迹。只是在年华的风中留下些许揪心的遗憾。细数窗前岁月，如诗、如画、如风，美的细腻，美的柔和。它如细雨轻打浮萍，如微风轻扣纱窗，如情感轻击心灵。浅唱过往，年华中愁绪连绵不绝。它如烟雨，如明月，如胭脂，如美酒。淡淡烟雨淡淡愁，淡淡明月上西楼;淡淡胭脂淡淡酒，淡淡酒解淡淡愁。冥思之间，猛然觉得我在年华的足迹中迷失了，没有了方向感，是我的胡思，还是岁月的乱想?似乎被酒精迷醉了，没有了归属感。难道我们的年华真如蒲公英一般，四海为家?随风而落?但春风告诉我们，年华如春风一般，细腻柔和;夏草告诉我，年华如夏草一般生机盎然;秋叶告诉我，年华如秋叶一般凄美萧条;冬雪告诉我，年华如冬雪一般晶莹剔透。于是我决定抓住年华的缰绳，推开命运的绊脚石，任年华之车在泥泞的生命之路上驰骋。',
  },
]

const dataField = ref(dataSourceMagStore.dataFieldMsgData)
</script>

<style scoped lang="scss"></style>
